<template>
  <div class="content-bat">
    <div class="content-bat_title" v-if="title">
      <div class="bigTitle">
        {{ title }}

      </div>
    </div>

    <div class="content-bat_contain">

      <div :class=" secondTitles[2]?'content-bat_contain_item1':'content-bat_contain_item'"
      :style="{ width: slotWidth[0] + '%' }"
      >
        <div class="d-flex">
          <div class="content-bat_itemTitle">{{ secondTitles[0] }}</div>
          <div class="d-flex align-items-center flex-grow-1" >
            <div class="bar" v-if="secondTitles[0]"> </div>
            <slot name="left_control"> </slot>

          </div>
          <div></div>
        </div>
        <slot name="left"> </slot>
      </div>

      <div :class=" secondTitles[2]?'content-bat_contain_item1':'content-bat_contain_item'" 
      :style="{ width: slotWidth[1] + '%' }"
      
      >
        <div class="d-flex">
          <div class="content-bat_itemTitle">{{ secondTitles[1] }}</div>
          <div class="d-flex align-items-center flex-grow-1" >
            <div class="bar" v-if="secondTitles[1]"> </div>
            <slot name="middle_control"> </slot>

          </div>
          <div></div>
        </div>
        <slot name="middle"> </slot>
      </div>

      
      <div :class=" secondTitles[2]?'content-bat_contain_item1':'content-bat_contain_item'" v-if=" secondTitles[2]"
      :style="{ width: slotWidth[2] + '%' }"
      
      >
        <div class="d-flex">
          <div class="content-bat_itemTitle">{{ secondTitles[2] }}</div>
          <div class="d-flex align-items-center flex-grow-1" >
            <div class="bar" v-if="secondTitles[2]"> </div>
            <slot name="right_control"> </slot>

          </div>
          <div></div>
        </div>
        <slot name="right"> </slot>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: "",
  },
  secondTitles: {
    type: Array<string>,
    default: () => [],
  },
  slotWidth: {
    type: Array<Number >,
    default: () => [33,33,33],
  },
});
</script>

<style scoped lang="less">
.content-bat {
  //文字白色
  color: #fff;
  width: 100%;
  height: 100%;
  // background-color: #033532;
  padding-left: 40px ;
  &_title {
    width: 100%;
    height: 13%;
    font-family: "优设标题黑";
    font-size: 40px;
   
    }
  &_contain {
    width: 100%;
    height: 87%;
    display: flex;
    justify-content: space-between;
    &_item {
      height: 100%;
      padding: 20px 10px 20px 10px;
      box-sizing: border-box;
    }
    &_item1 {
      height: 100%;
      padding: 20px 10px 20px 10px;
      box-sizing: border-box;
    }
  }

  &_itemTitle {
    font-family: "OPPOSans-Regular";
    font-size: 26px;
    padding-right: 20px;
    color: #E6FDFF;
    white-space: nowrap;
  }
}
.bar{
    width: 0;
    flex: 1;
    height: 3px; /* 调整高度以匹配您的设计 */
    background-image: linear-gradient(to right, rgba(92,225,255,1), rgba(92,225,255,0)); /* 这里的颜色值需要替换为匹配您的设计的准确值 */
}

.bigTitle{
  width: 100%;
  height: 100%;
  background: url('../../assets/image/underGround/titlebk.png'); 
  padding-left: 80px;
  background-repeat: no-repeat;
  background-size: 600px auto;
  background-position: left 18px;
}
</style>
